import React, { PureComponent } from 'react';
import { Col, Row, Card, List } from 'antd';
import { connect } from 'dva';
import styles from './ProcedureCreate.less';

@connect(({ procedure, loading }) => ({
  procedure,
  loading: loading.effects['procedure/fetch'],
}))
class ProcedureTodoAll extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'procedure/fetch',
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'procedure/clear',
    });
  }

  render() {
    const {
      loading,
      procedure: { procedureList },
    } = this.props;
    const rowLayout = {
      xs: 24,
      sm: 24,
      md: 8,
      lg: 8,
      xxl: 6,
      style: {
        marginBottom: 24,
      },
    };

    const renderItem = () => {
      return procedureList.map(item => (
        <Col {...rowLayout} key={item.id}>
          <Card hoverable bordered={false} title={item.title} loading={loading}>
            <List
              dataSource={item.data}
              renderItem={i => <List.Item className={styles.procedureItem}>{i}</List.Item>}
            />
          </Card>
        </Col>
      ));
    };

    return (
      <Row type="flex" align="top" gutter={16}>
        {renderItem()}
      </Row>
    );
  }
}

export default ProcedureTodoAll;
